<template>
  <div class="map-box" :style="setMapSizeStyle(width, maxWidth)">
    <picture class="map-image">
      <source
        src="https://www.opendota.com/assets/images/dota2/map/detailed_723.webp"
        type="image/webp"
      />
      <source
        src="https://www.opendota.com/assets/images/dota2/map/detailed_723.jpg"
        type="image/jpeg"
      />
      <img
        src="https://www.opendota.com/assets/images/dota2/map/detailed_723.jpg"
      />
    </picture>
    <div class="map-content"></div>
  </div>
</template>
<script setup>
import { computed, defineProps } from 'vue'
const props = defineProps({
  width: {
    type: [Number, String],
    default: 400,
  },
  maxWidth: {
    type: [Number, String],
    default: 400,
  },
})
const width = computed(() =>{
  return props.width
})

const maxWidth = computed(() =>{
  return props.maxWidth
})
const setMapSizeStyle = (width, maxWidth) => ({
  width,
  height: width,
  maxWidth,
  maxHeight: maxWidth,
})
</script>
<style lang="scss" scoped>
.map-box {
  position: relative;
  .map-image{
    position: relative;
     img {
      height: 100%;
      max-width: 100%;
    }
  }
  .map-content{
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 2;
  }
}
</style>
